const canvas = document.querySelector("#canvas");
const ctx = canvas.getContext("2d");

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

let numberofParticles = 200;
const particlesArray = [];
let hue = 250;

const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
gradient.addColorStop("0.2", "red");
gradient.addColorStop("0.4", "blue");
gradient.addColorStop("0.6", "yellow");
gradient.addColorStop("0.8", "pink");

const gradient2 = ctx.createLinearGradient(0, 0, canvas.width, 0);
gradient2.addColorStop("0.2", "black");
gradient2.addColorStop("0.5", "transparent");
gradient2.addColorStop("0.8", "white");

class Particle {
  constructor() {
    this.x = Math.random() * canvas.width;
    this.y = Math.random() * canvas.height;
    this.radius = Math.random() * 10 + 2;
    this.speedX = Math.random() * 3 - 1.5;
    this.speedY = Math.random() * 3 - 1.5;
  }

  draw1() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
    // ctx.fillStyle = "blue";
    // ctx.fillStyle = "hsl(250, 100%, 50%)";
    ctx.fillStyle = `hsl(${hue}, 100%, 50%)`;
    ctx.fill();
  }

  // draw2() {
  //   ctx.beginPath();
  //   ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
  //   ctx.fillStyle = "blue";
  //   ctx.fill();
  //   ctx.strokeStyle = "black";
  //   ctx.stroke();
  // }

  draw() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
    ctx.fillStyle = gradient;
    ctx.fill();
    ctx.strokeStyle = gradient2;
    ctx.stroke();
  }

  update() {
    this.x += this.speedX;
    this.y += this.speedY;
    if (this.x + this.radius > canvas.width || this.x - this.radius < 0) {
      this.speedX = -this.speedX;
    }

    if (this.y + this.radius > canvas.height || this.y - this.radius < 0) {
      this.speedY = -this.speedY;
    }

    this.draw();
  }
}

function init() {
  for (let i = 0; i < numberofParticles; i++) {
    particlesArray.push(new Particle());
  }
}

const mark = false;

function animate() {
  if (mark) {
    // ctx.fillStyle = "rgba(255, 255, 255, 0.05)";
    ctx.fillStyle = "rgba(255, 255, 255, 0.02)";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
  } else {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
  }

  for (let i = 0; i < particlesArray.length; i++) {
    particlesArray[i].update();
  }

  hue += 0.5;

  requestAnimationFrame(animate);
}

init();
animate();
